<template name="livechatMonitors">
	{{#if hasLicense}}
		{{#requiresPermission 'manage-livechat-monitors'}}
			<form id="form-monitor" class="form-inline">
				<div class="form-group">
					{{> livechatAutocompleteUser
						onClickTag=onClickTagMonitors
						list=selectedMonitors
						deleteLastItem=deleteLastMonitor
						onSelect=onSelectMonitors
						collection='UserAndRoom'
						endpoint='users.autocomplete'
						field='username'
						sort='username'
						label="Search_by_username"
						placeholder="Search_by_username"
						name="username"
						exceptions=exceptionsMonitors
						icon="at"
						noMatchTemplate="userSearchEmpty"
						templateItem="popupList_item_default"
						modifier=monitorModifier
					}}
				</div>
				<div class="form-group">
					<button name="add" class="rc-button rc-button--primary add" disabled='{{isloading}}'>{{_ "Add"}}</button>
				</div>
			</form>

			<div class="rc-table-content">
				<form class="search-form" role="form">
						<div class="rc-input__wrapper">
							<div class="rc-input__icon">
								{{#if isloading}}
									{{> loading }}
								{{else}}
									{{> icon block="rc-input__icon-svg" icon="magnifier" }}
								{{/if}}
							</div>
							<input id="monitor-filter" type="text" class="rc-input__element"
									placeholder="{{_ "Search"}}" autofocus dir="auto">
							</div>
				</form>
				<div class="results">
					{{{_ "Showing_results" monitors.length}}}
				</div>

				{{#table fixed='true' onScroll=onTableScroll}}
					<thead>
						<tr>
							<th><div class="table-fake-th">{{_ "Name"}}</div></th>
							<th width="33%"><div class="table-fake-th">{{_ "Username"}}</div></th>
							<th width="33%"><div class="table-fake-th">{{_ "Email"}}</div></th>
							<th width='40px'><div class="table-fake-th">&nbsp;</div></th>
						</tr>
					</thead>
					<tbody>
						{{#each monitors}}
							<tr class="rc-table-tr user-info row-link" data-id="{{_id}}">
								<td>
									<div class="rc-table-wrapper">
										<div class="rc-table-avatar">{{> avatar username=username}}</div>
										<div class="rc-table-info">
											<span class="rc-table-title">
												{{name}}
											</span>
										</div>
									</div>
									<div class="rc-table-wrapper">
										<div class="rc-table-info">
											<span class="rc-table-title">
												{{fname}}
											</span>
										</div>
									</div>
								</td>
								<td>{{username}}</td>
								<td>{{emailAddress}}</td>
								<td>
									<a href="#remove" class="remove-monitor">
										<i class="icon-trash"></i>
									</a>
								</td>
							</tr>
						{{/each}}
					</tbody>
				{{/table}}
			</div>
		{{/requiresPermission}}
	{{/if}}
</template>
